<template>
 <div class="warpper">
  <swiper :options="swiperOption" v-if="list.length"> <!--V-if是让数组有内容了才创建-->
    <!-- slides -->
    <swiper-slide v-for="item of list" :key="item.id">
      <img class="swiper-img" :src="item.imgUrl">
    </swiper-slide>

    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
 </div>
 </template>

<script>
export default{
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination', // banner图中选中后下方显示小圆点
        loop: true
      }
    }
  }
}

</script>

<style lang="stylus" scoped>
  .warpper >>> .swiper-pagination-bullet-active
    background-color:#fff// 上面表强穿透，可以无视scoped 因为控制小圆点的组件不在本组件
  .warpper
    overfolw:hidden
    heigh:37.5vw//防止图片下方的组件先出现，然后图片加载完把文字撑到下面，影响用户跳动，37.5是长宽比
    .swiper-img
      width:100%
</style>
